<template>
  <div>
    <a-form-model
      :model="form"
      class="login-box"
    >
      <a-form-model-item style="text-align-last: justify;width: 200px;">
        <span style="font-size: 20px;font-weight: bold;">
          用户登录
        </span>
      </a-form-model-item>
      <a-form-model-item style="margin-bottom: 16px;width: 400px;">
        <a-input
          v-model="form.username"
          placeholder="请输入登录账号"
        >
          <a-icon slot="prefix" type="user" style="color: #aaa;"/>
        </a-input>
      </a-form-model-item>
      <a-form-model-item style="margin-bottom: 16px;width: 400px;">
        <a-input
          v-model="form.password"
          placeholder="请输入登录密码"
        >
          <a-icon slot="prefix" type="lock" style="color: #aaa;"/>
        </a-input>
      </a-form-model-item>
      <a-form-model-item style="margin-bottom: 16px;width: 400px;">
        <a-checkbox @change="onChange" :checked="checked">
          记住密码
        </a-checkbox>
      </a-form-model-item>
      <a-form-model-item style="position: relative; display: flex;justify-content: center;">
        <a-button type="primary" style="width:400px;border-radius: 8px;">登录</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
// import crypto from '@/utils/crypto-js'
export default {
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      checked: null
    }
  },

  created () {
    this.checked = this.$store.getters.user.checked
    console.log(this.checked)
    console.log(this.$store.getters.user.checked)
    if (this.checked) {
      this.form = this.$store.getters.user.userForm
      // this.form.password = crypto.deciphering(this.form.password)
    }
  },

  methods: {
    ...mapMutations(['savePwd', 'setChecked']),
    onChange (val) {
      console.log(val)
      const { target: { checked } } = val
      console.log(checked)
      checked && this.setChecked(checked)
      !checked && this.setChecked()
      this.checked = checked
      if (this.checked) {
        this.savePwd(this.form)
      } else {
        this.savePwd()
      }
    }
  },

  watch: {
    'form.username' (val) {
      if (this.checked) {
        this.savePwd(this.form)
      } else {
        this.savePwd()
      }
    },
    'form.password' (val) {
      if (this.checked) {
        this.savePwd(this.form)
      } else {
        this.savePwd()
      }
    }
  }
}
</script>

<style scoped lang='less'>
.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  height: 360px;
  background-color: #fff;
  border-radius: 16px;
  padding: 10px 20px;
}
</style>
